<template>
    <div class='wrap'>
      <div class="lost-main" :class="lostClass">
        <div v-if="canLottery" id="btn_h_1" @click='lottery'></div>
        <div v-else id="btn_h_2" @click='restart'></div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      lostClass: ''
    }
  },
  methods: {
    restart () {
      this.$router.push('/mode')
    },
    lottery () {
      this.$router.push('/lottery/1')
    },
    randomBy () {
      let index = Math.floor(Math.random() * 3)
      this.lostClass = 'lostClass' + index
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  mounted: function () {
    document.getElementsByTagName('body')[0].className = 'bg2img'
    this.randomBy()
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/mode'})
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bg2img')
  },
  computed: {
    canLottery () {
      let lv = this.GLOBAL.player.level
      if (lv > 2) {
        return this.GLOBAL.player.isCanPrize
      } else {
        return false
      }
    }
  }
}
</script>

<style>
.bg2img {
  background:url('../assets/lost/bg_19.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.lost-main {
  display: flex;
  min-height: 36rem;
  min-width: 20.5rem;
  flex-direction: column-reverse;
  align-items: center;
}
.lostClass0 {
    background:url('../assets/lost/bg_20.png') no-repeat;
    background-size:20.5rem;
}
.lostClass1 {
    background:url('../assets/lost/bg_59.png') no-repeat;
    background-size:20.5rem;
}
.lostClass2 {
    background:url('../assets/lost/bg_60.png') no-repeat;
    background-size:20.5rem;
}
.lost-main #btn_h_1 {
  height: 3.5rem;
  width: 14rem;
  background:url('../assets/lost/btn_17.png') no-repeat;
  background-size:14rem 3.5rem;
  margin-bottom: 5rem;
}
.lost-main #btn_h_2 {
  height: 3.5rem;
  width: 14rem;
  background:url('../assets/lost/btn_16.png') no-repeat;
  background-size:14rem 3.5rem;
  margin-bottom: 5rem;
}
</style>
